<template>
  <div class="z-tag-list">
    <div class="z-tag-list--wrap">
      <div
        class="z-tag-list--item"
        v-for="(item, index) in list"
        :key="index"
        :class="{
          'is-active': item.code === active
        }"
        @click="onClick(item)"
      >
        <svg-icon :name="item.icon" v-if="item.icon" class="z-tag-list--icon"></svg-icon>
        <span class="z-tag-list--label">{{ $t(item.name) }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import type { Props } from './type'

defineOptions({
  name: 'z-tag-list'
})

const props = defineProps<Props>()
const { t } = useI18n()
const $t = (text: string = '') => {
  return props.i18n && text ? t((props.i18nPrefix ? props.i18nPrefix + '.' : '') + text) : text
}

const active = defineModel<string | number>()

const emits = defineEmits<{
  change: [item: Props['list'][number]]
}>()

const onClick = (item: Props['list'][number]) => {
  active.value = item.code
  emits('change', item)
}
</script>

<style lang="scss">
@use './style.scss';
</style>
